/**
 * Created by 4565646 on 2016/3/1.
 */
var data = [{author:'Beace Lee',text:'my name is Beace'},{author:'Jerry hou',text:'my name is jerry'}];
//T4
var Comment = React.createClass({
  rawMarkup:function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html:rawMarkup}
  },
  render:function(){
    return(
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()}/>
      </div>
    )
  }
});



var CommentBox = React.createClass({

  loadCommentsFromServer:function(){
    $.ajax({
      url:this.props.url,
      dataType:'json',
      cache:false,
      success:function(data){
        this.setState({data:data});
      }.bind(this),
      error:function(xhr,status,err){
        console.error(this.props.url,status,err.toString());
      }.bind(this)
    })
  },

  handlerCommentSubmit:function(comment){
    comment.id = Date.now();
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url:this.props.url,
      dataType:'json',
      cache:false,
      type: 'POST',
      data:comment,
      success:function(data){
        this.setState({data:data})
      }.bind(this),
      error:function(xhr,status,err){
        console.error(this.props.url.status,err.toString());
      }.bind(this)
    })
  },
  getInitialState:function(){
    return {data:[]};
  },
  componentDidMount:function(){
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer,this.props.pollInterval);
  },
  render:function() {
    return(
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data}/>
        <CommentForm onCommentSubmit={this.handlerCommentSubmit}/>
      </div>
    )
  }
});

//T2
var CommentList = React.createClass({
  render:function(){
    var commentNodes = this.props.data.map(function(comment){
      return (
          <Comment author={comment.author} key={comment.id}>
            {comment.text}
          </Comment>
      )
    });
    return(
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});


var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();

    var author = this.refs.author.value.trim();
    var text = this.refs.text.value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    this.refs.author.value = '';
    this.refs.text.value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});



ReactDOM.render(
  <CommentBox url="/api/comments" pollInterval={2000}/>,
  document.getElementById('container')
);


